import debounce from 'lodash/debounce';
import isArray from 'lodash/isArray';
import { getToken } from '@/utils/auth';
import { getOptionList, getSimpleOption } from '@/static/js/dataSource';
const mixin = {
  inheritAttrs: false,
  props: {
    editFormData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    editFormMap: {
      type: Array,
      default: function () {
        return [];
      },
    },
    tableListMap: {
      type: Array,
      default: function () {
        return [];
      },
    },
    editFormRule: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  computed: {
    baseApi() {
      return process.env.VUE_APP_BASE_API;
    },
  },
  watch: {
    // 由于表单和表格组件共用一个mixins，所以注册两个通用映射editFormMap和tableListMap
    editFormMap: {
      handler(editFormMap) {
        this.handleReqOption(editFormMap);
      },
      deep: true,
      immediate: true,
    },
    tableListMap: {
      handler(tableListMap) {
        this.handleReqOption(tableListMap);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 动态下拉数据Map
      optionListMap: {},
      // upload组件的文件列表Map
      fileListMap: {},
      // upload组件的配置参数
      uploadOption: {
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        url: process.env.VUE_APP_BASE_API,
      },
    };
  },
  methods: {
    // 处理父子组件间的事件穿透v-on="$listener"
    handleEventAction(eventName, params) {
      this.$emit(eventName, params);
    },
    // 注册全局select组件的全局事件
    changeAction(value, editItem) {
      // 赋值多选对应的prop，一般为逗号隔开
      if (isArray(value) && editItem.stringProp) {
        const arrStr = value.join(',');
        this.$set(this.editFormData, editItem.stringProp, arrStr);
      }
      // 赋值下拉对应的label值
      if (editItem.labelProp) {
        const prop = editItem.linkOptionProp || editItem.prop;
        const optionsList = this.optionListMap[prop];
        const option = optionsList.find((item) => item[editItem.optionValue || prop] === value);
        if (option) {
          Object.assign(this.editFormData, { [editItem.labelProp]: option[editItem.optionLabel || editItem.labelProp] });
        }
      }
      this.$emit('changeAction', { ...editItem });
    },
    // 注册全局input组件的全局事件
    inputAction: debounce(function (prop) {
      this.$emit('inputAction', { prop });
    }, 1000),
    // 处理静态映射Map的optionDynamic请求
    handleReqOption(fieldMap = []) {
      fieldMap.map((item) => {
        const { prop, linkOptionProp } = item;
        if (!['select', 'radio', 'cascader', 'switchSelect'].includes(item.type) || linkOptionProp) return;
        this.getOptionList(prop, item);
      });
      this.$emit('getFormOptionListMap', this.optionListMap);
    },
    // 请求下拉数据
    getOptionList(optionProp, optionItem) {
      const promiseList = getOptionList(optionProp, optionItem);
      promiseList.then((res) => {
        this.$set(this.optionListMap, optionProp, res);
      });
    },
    // 获取静态下拉数据
    getSimpleOption(optionKey) {
      return getSimpleOption(optionKey);
    },
    // 上传组件上传前的文件大小检查
    beforeUploadAction(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleDateChange(item, date) {
      const rangeTypes = ['daterange', 'datetimerange', 'monthrange'];
      if (rangeTypes.includes(item.dateType)) {
        const rangeData = {
          [item.startProp]: date[0],
          [item.endProp]: date[1],
        };
        Object.assign(this.editFormData, rangeData);
      }
    },
    // 成功上传到服务器并返回图片链接，同时更新文件集合和绑定字段
    handleFileSuccess({ prop, limit }, { data, msg }, { file, fileList }) {
      console.log('upload11');
      this.fileListMap[prop] = fileList;
      this.$emit('update:editFormData', { ...this.editFormData, [prop]: data });
    },
    handleFileChange(refName, { file, fileList }) {
      console.log(this.$refs[refName][0], '???resfname');
      const ref = this.$refs[refName][0] || this.$refs[refName];
      if (ref.uploadFiles.length > 1) {
        ref.uploadFiles.shift();
      }
      console.log(ref.uploadFiles);
    },
  },
};
export default mixin;
